<template>
  <transition name="el-zoom-in-center">
    <div class="JNPF-common-layout"   >
      <div class="JNPF-preview-main" style="background-color: rgb(240,242,245)!important;color: black!important;font-weight: 500" >


        <el-page-header @back="goBack"    style="font-weight: 800" content="减免详情"/>

        <el-row :gutter="10" class=" main" :style="{margin: '0 auto',width: '100%'}">


          <el-form ref="elForm" :model="dataForm" :rules="rules" size="small" label-width="180px"
                   label-position="right"
          >
            <template v-if="!loading">
              <el-card style="margin-top: 20px" >
                <el-col :span="24" style="margin-top: 10px">
                  <el-form-item label-width="100">
                    <groupTitle style="margin-left: 21px;font-weight: 700" content-position="left" :closable="false" content="基本信息"></groupTitle>
                  </el-form-item>
                </el-col>

                <el-col :span="24">
                  <el-row :gutter="10" style="margin-left: 21px">
                    <el-col :span="6" >
                      <el-form-item label="账单编号:" label-width="100" class="custom-form-item">
                        <p>{{ dataForm.info.billNo }}</p>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label-width="100">
                        <el-form-item label="状态:" label-width="100">
                          <el-tag v-if="dataForm.info.flowState==1">等待审核</el-tag>
                          <el-tag type="success" v-else-if="dataForm.info.flowState==2">审核通过</el-tag>
                          <el-tag type="danger" v-else-if="dataForm.info.flowState==3">审核驳回</el-tag>
                          <el-tag type="info" v-else-if="dataForm.info.flowState==4">流程撤回</el-tag>
                          <el-tag type="info" v-else-if="dataForm.info.flowState==5">审核终止</el-tag>
                          <el-tag type="warning" v-else>等待提交</el-tag>
                        </el-form-item>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label-width="100">
                        <el-form-item label="客户名称:" label-width="100">
                          <p>{{ dataForm.info.customerName }}</p>
                        </el-form-item>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label-width="100">
                        <el-form-item label="计费周期:" label-width="100">
                          <p>{{ dataForm.info.expenseCycle }}</p>
                        </el-form-item>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6" >
                      <el-form-item label-width="100">
                        <el-form-item label="减免金额:" label-width="100">
                          <!--                      <p v-if=" !dataForm.status" style="color: red">未收款</p>-->
                          <p>{{ dataForm.info.expenseCycle }}</p>
                        </el-form-item>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6" >
                      <el-form-item label-width="100">
                        <el-form-item label="减免日期:" label-width="100">
                          <p>{{ dataForm.info.operateDate }}</p>
                        </el-form-item>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6" >
                      <el-form-item label-width="100">
                        <el-form-item label="减免原因:" label-width="100">
                          <p>{{ dataForm.info.reason }}</p>
                        </el-form-item>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6" >
                      <el-form-item  label="附件:" label-width="100">

                          <JNPF-UploadFz  disabled   v-model="dataForm.info.filePath"
                                          :fileSize="10" sizeUnit="MB" :limit="9" buttonText="点击上传"
                          >

                          </JNPF-UploadFz>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-col>
              </el-card>
              <el-card class="bottom_card">
              <el-col :span="24">
                <el-form-item label-width="100">
                  <groupTitle style="margin-left: 21px"
                              content-position="left" :closable="false" content="减免费用项"
                  >
                  </groupTitle>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label-width="100" style="margin-left: 21px">
                  <!--                <div class="JNPF-common-title">-->
                  <!--                  <h2 style="font-weight: 600">费用项目明细</h2>-->
                  <!--                </div>-->
                  <el-table  border :data="dataForm.details" size="mini" style="margin-bottom: 50px">
                    <el-table-column type="index" width="150" label="序号" align="center"/>
                    <!--                  <el-table-column  width="150" label="状态" align="status">-->
                    <!--                    <template slot-scope="scope">-->
                    <!--                    <p v-if="scope.row.status">待收款</p>-->
                    <!--                    </template>-->
                    <!--                  </el-table-column>-->


                    <el-table-column  prop="expenseItem" label="费用项">
                      <template slot-scope="scope">
                        <!--                      <el-input disabled v-model="scope.row.expenseItem"-->
                        <!--                                placeholder="请输入" readonly clearable :style='{"width":"100%"}'-->
                        <!--                      >-->
                        <!--                      </el-input>-->
                        <!--                      -->
                        <p>{{ scope.row.expenseItem }}</p>

                      </template>
                    </el-table-column>
                    <el-table-column prop="expenseItem"  label="减免金额">
                      <template slot-scope="scope">
                        <!--                      <el-input disabled v-model="scope.row.principal"-->
                        <!--                                placeholder="请输入" readonly clearable :style='{"width":"100%"}'-->
                        <!--                      >-->
                        <!--                      </el-input>-->
                        <div style="text-align: left" v-html="scope.row.crAmount"></div>
                      </template>
                    </el-table-column>
                    <!--                  <el-table-column prop="expenseItem"   width="450" label="滞纳金明细">-->
                    <!--                  <template slot-scope="scope">-->

                    <!--                    <div   style="text-align: left"  v-html="scope.row.lateFee"></div>-->
                    <!--                  </template>-->
                    <!--                  </el-table-column>-->

                    <!--                  <el-table-column label="操作" width="180">-->
                    <!--                    <template slot-scope="scope">-->
                    <!--                      <el-button size="mini" type="text" class="JNPF-table"-->
                    <!--                                 @click="deldetails(scope.$index)"-->
                    <!--                      >结转-->
                    <!--                      </el-button>-->

                    <!--                      <el-button size="mini" type="text" class="JNPF-table"-->
                    <!--                                 @click="deldetails(scope.$index)"-->
                    <!--                      >减免-->
                    <!--                      </el-button>-->

                    <!--&lt;!&ndash;                      <el-button size="mini" type="text" class="JNPF-table-delBtn"&ndash;&gt;-->
                    <!--                      <el-button size="mini" type="text" class="JNPF-table"-->
                    <!--                                 @click="deldetails(scope.$index)"-->
                    <!--                      >拆费-->
                    <!--                      </el-button>-->
                    <!--                    </template>-->
                    <!--                  </el-table-column>-->
                  </el-table>

                  <SelectDialog v-if="selectDialogVisible" :config="currTableConf" :formData="dataForm"
                                ref="selectDialog" @select="addForSelect" @close="selectDialogVisible=false"
                  />
                </el-form-item>
              </el-col>
              </el-card>

            </template>
          </el-form>
        </el-row>


        <FlowBox v-if="flowVisible" ref="FlowBox" @close="colseFlow"/>
      </div>
    </div>
  </transition>
</template>
<style scoped>

/* 增加表格行高 */
/deep/.el-table .el-table__row {
  height: 60px; /* 你想要的行高 */
  border: 1px slategrey solid;
}
/* 如果你还想要调整单元格内部的垂直居中 */
/deep/.el-table .cell {
  height: 60px; /* 和行高一致 */
  line-height: 60px; /* 垂直居中文本 */

}
.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {

  margin-bottom: 8px !important;
}


/* 响应式布局 */
@media (max-width: 768px) {
  .container {
    width: 100%;
    padding: 0 10px; /* 调整左右边距 */
  }
}
.bottom_card{
  margin-top: 15px;
}
</style>
<script>
import FlowBox from '@/views/workFlow/components/FlowBox'
import request from '@/utils/request'

export default {
  components: { FlowBox },
  // props: [],
  data() {
    return {
      flowVisible: false,

      formVisibleRefund: false,
      formVisibleBill: false,
      formVisible: false,
      id: '',
      visible: false,
      loading: false,
      printBrowseVisible: false,
      printId: '',
      dataForm: {
        id: '',
        paymentType: '',
        paymentBillNo: '',
        receiptAccount: '',
        paymentBy: '',
        paymentAccount: '',
        receiptDate: '',
        paymentCertificateFile: [],
        zcglcwbillitemList: []
      },
      paymentTypeOptions: [{ 'fullName': '选项一', 'id': '1' }, { 'fullName': '选项二', 'id': '2' }],
      receiptAccountOptions: [{ 'fullName': '选项一', 'id': '1' }, { 'fullName': '选项二', 'id': '2' }],
      paymentByOptions: [{ 'fullName': '选项一', 'id': '1' }, { 'fullName': '选项二', 'id': '2' }],
      paymentAccountOptions: [{ 'fullName': '选项一', 'id': '1' }, { 'fullName': '选项二', 'id': '2' }]

    }
  },
  computed: {},
  watch: {},
  // created() {
  //   this.id = this.$route.query.id
  //   if(this.id){
  //     this.init(this.id)
  //
  //   }
  //
  // },
  mounted() {
  },
  methods: {
    formatCurrency(value) {
      return new Intl.NumberFormat('zh-CN', {
        style: 'currency',
        currency: 'CNY'
      }).format(value);
    },
    billReduce() {
      this.formVisible = true
      this.$nextTick(() => {
        this.$refs.JNPFFormBillReduce.init(this.dataForm.id, null)
      })

    },

    colseFlow(isrRefresh) {
      this.flowVisible = false
      if (isrRefresh) this.reset()
    },
    goBack(isRefresh) {
      this.$emit('close', isRefresh)
      // this.$router.push(`/zcgl/zcglcwbill/index?id=${this.id}`)
    },
    refresh() {
      this.init(this.id)
    },
    toTicket(id, flowState) {
      let data = {
        id: this.id || '',
        enCode: 'jmcl',
        flowId: '621351715181957957',
        formType: 1,
        opType: flowState ? 0 : '-1',
        status: flowState
      }
      this.flowVisible = true
      this.$nextTick(() => {

        this.$refs.FlowBox.init(data)
      })
      // },
      // this.$router.push(`/zcgl/zcglcwbill/openTicket?id=${this.id}`)
    },
    dataInfo(dataAll) {

      let _dataAll = dataAll

      //         _dataAll.paymentType = _dataAll.paymentType ? JSON.parse( _dataAll.paymentType):[]
      //         _dataAll.receiptAccount = _dataAll.receiptAccount ? JSON.parse( _dataAll.receiptAccount):[]
      //         _dataAll.paymentBy = _dataAll.paymentBy ? JSON.parse( _dataAll.paymentBy):[]
      //         _dataAll.paymentAccount = _dataAll.paymentAccount ? JSON.parse( _dataAll.paymentAccount):[]
      _dataAll.paymentCertificateFile = _dataAll.paymentCertificateFile ? JSON.parse(_dataAll.paymentCertificateFile) : []
      _dataAll.info.filePath = _dataAll.info.filePath ? JSON.parse(_dataAll.info.filePath) : []
      for (let i = 0; i < _dataAll.details.length; i++) {
        var _list = _dataAll.details[i]
      }
      this.dataForm = _dataAll

      this.dataForm.details.forEach(i=>{
        i.crAmount = this.formatCurrency( i.crAmount)
      })
    },
    billCollection() {

      this.formVisibleBill = true
      this.$nextTick(() => {
        this.$refs.JNPFFormBill.init(this.dataForm.id, null)
      })

    },

    billRefund() {

      this.formVisibleRefund = true
      this.$nextTick(() => {
        this.$refs.JNPFFormBillRefund.init(this.dataForm.id, null)
      })

    },

    toBillRefund(id, flowState) {
      let data = {
        create: true,
        id: this.id || '',
        enCode: 'tklc',
        flowId: '621706419615307973',
        formType: 1,
        opType: flowState ? 0 : '-1',
        status: flowState
      }
      this.flowVisible = true
      this.$nextTick(() => {

        this.$refs.FlowBox.init(data)
      })
    },
    toBllReduce(id, flowState) {
      let data = {
        create: true,
        id: this.id || '',
        enCode: 'jmcl',
        flowId: '621313921785008965',
        formType: 1,
        opType: flowState ? 0 : '-1',
        status: flowState
      }
      this.flowVisible = true
      this.$nextTick(() => {

        this.$refs.FlowBox.init(data)
      })
    },

    init(id) {

      this.id = id
      this.dataForm.id = id || 0
      this.visible = true
      this.$nextTick(() => {
        if (this.dataForm.id) {
          // this.loading = true
          request({
            url: '/api/zcgl/fico/bill/operation/detail/' + this.dataForm.id,
            method: 'get'
          }).then(res => {

            this.dataInfo(res.data)



            this.loading = false
          })
        }

      })
    }
  }
}

</script>
<style>
/*.cell{*/
/*  background-color: #fafafa;*/
/*  border-bottom: 1px solid rgba(0,0,0,.06);*/
/*  min-height: 50px!important;*/
/*  line-height: 50px;*/
/*}*/
/*.el-table__row{*/
/*  line-height: 50px!important;*/

/*}*/
/deep/.el-form-item custom-form-item el-form-item--small{
  margin-bottom: 171px!important;
}
</style>
